<template>
    <div class="nav">
        <div class="bx">
            <div class="left">
                <p v-for="(v,index) in arr1" :key="index" @click="fun(index)" :class="{fontS:current===index}">{{ v }}</p>
            </div>
            <div class="right">
            </div>
        </div>
        <div class="content" v-show="current===0">
            <div v-for="(v,index) in arr2" :key="index">
                <img :src="v.img">
                <p>{{ v.content }}</p>
            </div>
        </div>
        <div class="content" v-show="current===1">
            <div v-for="(v,index) in arr3" :key="index">
                <img :src="v.img">
                <p>{{ v.content }}</p>
            </div>
        </div>
        <div class="content" v-show="current===2">
            <div v-for="(v,index) in arr4" :key="index">
                <img :src="v.img">
                <p>{{ v.content }}</p>
            </div>
        </div>
        <div class="content" v-show="current===3">
            <div v-for="(v,index) in arr5" :key="index">
                <img :src="v.img">
                <p>{{ v.content }}</p>
            </div>
        </div>
        <div class="content" v-show="current===4">
            <div v-for="(v,index) in arr6" :key="index">
                <img :src="v.img">
                <p>{{ v.content }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    name:"navBox",
    data(){
        return {
            current:0
        }
    },
    methods:{
        fun(index){
            this.current = index
        }
    },
    props:{
        arr1:{
            type:Array,
            required:true
        },
        arr2:{
            type:Array,
            required:true
        },
        arr3:{
            type:Array,
            required:true
        },
        arr4:{
            type:Array,
            required:true
        },
        arr5:{
            type:Array,
            required:true
        },
        arr6:{
            type:Array,
            required:true
        }
    }
}
</script>

<style scoped>
.nav {
  width: 100vw;
  height: 12.13333333vw;
  border-bottom: 0.13333333vw solid #eeeeee;
}
.nav .bx {
  width: 93.33333333vw;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .bx .left {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav .bx .left p {
  width: 8.8vw;
  height: 5.73333333vw;
  font-size: 4vw;
  color: #151515;
  margin-right: 8vw;
  text-align: center;
}
.nav .bx .left .fontS {
  color: #ffa200;
  border-bottom: 0.53333333vw solid #ffa200;
}
.nav .bx .right {
  width: 5.73333333vw;
  height: 5.73333333vw;
  background: url(https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/nav/category_icon_up.c77b7129c6bdf12fbe7e36aa3385be0f.png) no-repeat center / 100%;
}
.nav .content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.nav .content div {
  width: 25%;
  height: 16.66666667vw;
  margin-top: 7.46666667vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.nav .content div img {
  width: 13.06666667vw;
  height: 12.13333333vw;
}
.nav .content div p {
  text-align: center;
  font-size: 3.2vw;
  color: #222222;
}

</style>